<template>
	<t-modal
		title="权限维护"
		:width="800"
		:visible="visible"
		:destroyOnClose="true"
		@cancel="cancel"
	>
		<a-steps style="padding: 5px 20px 20px" :current="current" @change="onChange">
			<a-step :status="current===0?'process':'wait'" title="按钮权限">
				<a-icon slot="icon" type="switcher" />
			</a-step>
<!-- 			<a-step :status="current===1?'process':'wait'" title="列表权限">
				<a-icon slot="icon" type="ordered-list" />
			</a-step>
			<a-step :status="current===2?'process':'wait'" title="表单权限">
				<a-icon slot="icon" type="form" />
			</a-step>
			<a-step :status="current===3?'process':'wait'" title="数据权限">
				<a-icon slot="icon" type="database" />
			</a-step> -->
		</a-steps>
		<tool-bar
			:showDivisionBar="false"
			@search="search"
			@reset="reset"
		>
		  <template slot="toolBtn" slot-scope="scope">
				<a-button
					class="cu-btn-primary"
					icon="plus"
					@click="handleAdd"
				>新增</a-button>
		  </template>
			<!-- <template slot="toolForm">
				<a-form-item label="菜单按钮">
				  <a-input v-model="queryParam.buttonName" placeholder="菜单按钮"/>
				</a-form-item>
				<a-form-item label="按钮编码">
				  <a-input v-model="queryParam.buttonCode" placeholder="按钮编码"/>
				</a-form-item>
			</template> -->
		</tool-bar>
		<div class="margin-top-xs" style="padding-bottom: 45px;">
			<a-table
				:columns="columns"
				:data-source="dataSource"
				:pagination="pagination"
				:scroll="scrollXY"
			>
				<span slot="renderSerial" slot-scope="text, record, index">
				  {{ index + 1 }}
				</span>
				<span slot="renderAction" slot-scope="text, record">
				  <template>
				    <a @click="handleEdit(record)">编辑</a>
				    <span class="action-margin"></span>
				    <a @click="handleSub(record)" class="action-delete">删除</a>
				  </template>
				</span>
			</a-table>
		</div>
		<auth-maintain-form
			ref="authMaintainForm"
			:model="authMaintainFormModel"
			:visible="authMaintainFormVisible"
			@ok="authMaintainFormOk"
			@cancel="authMaintainFormCancel"
		/>
		<template slot="footer">
			<a-button @click="cancel">
				关闭
			</a-button>
		</template>
	</t-modal>
</template>

<script>
	import authMaintainForm from "./authMaintainForm.vue";
	export default {
		components: {
			authMaintainForm
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
	  data() {
	    return {
				current: 0,
				columns: [{
					title: "#",
					align: "center",
					width: 55,
					langCode: "serialNo",
					scopedSlots: {
						customRender: "renderSerial",
					},
				},{
				  title: "按钮名称",
				  dataIndex: "buttonName",
				},{
				  title: "按钮编码",
				  dataIndex: "buttonCode",
				},{
				  title: "状态",
				  dataIndex: "buttonStatus",
				},{
				  title: "排序",
				  dataIndex: "buttonSort",
				},{
				  title: "操作",
				  dataIndex: "action",
					scopedSlots: {customRender: "renderAction"}
				}],
				dataSource: [],
				pagination: {
				  pageSize: 10,
				  showSizeChanger: true,
				  hideOnSinglePage: true,
				  onShowSizeChange: (current, pageSize) =>
				    this.onShowSizeChange(current, pageSize),
				},
				authMaintainFormVisible: false,
				menuUuid: "",
				queryParam: {},
				authMaintainFormModel: null
	    };
	  },
		computed: {
			scrollXY() {
			  const tdHeight = this.dataSource?.length * 40 ?? 0;
			  return { y: 360, x: '100%'};
			}
		},
		watch: {
			menuUuid: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					if(newVal){
						this.getPageSet();
					}
				}
			}
		},
		mounted() {
			
		},
	  methods: {
			getPageSet(){
				this.queryParam.menuUuid = this.menuUuid;
				this.$post("/system/sysMenuButton/getPageSet", this.queryParam).then(res => {
					if(res.statusCode === 200){
						const pager = {
						  ...this.pagination,
						};
						pager.total = res.data.totalCount;
						this.dataSource = res.data.rows;
						this.pagination = pager;
					}
				})
			},
	    onChange(current) {
				this.columns = [{
				  title: "操作",
				  dataIndex: "action",
					scopedSlots: {customRender: "renderAction"}
				}]
				if(current === 0){
					this.columns.unshift({
						title: "按钮名称",
						dataIndex: "buttonName",
					},{
						title: "按钮编码",
						dataIndex: "buttonCode",
					},{
						title: "状态",
						dataIndex: "buttonStatus",
					},{
						title: "排序",
						dataIndex: "buttonSort",
					})
				}else if(current === 1){
					this.columns.unshift({
						title: "字段名称",
						dataIndex: "btnName",
					},{
						title: "字段编码",
						dataIndex: "orgName",
					},{
						title: "字段说明",
						dataIndex: "orgName1",
					})
				}else if(current === 2){
					this.columns.unshift({
						title: "字段名称",
						dataIndex: "btnName",
					},{
						title: "字段编码",
						dataIndex: "orgName",
					},{
						title: "字段说明",
						dataIndex: "orgName1",
					})
				}else if(current === 3){
					this.columns.unshift({
						title: "规则名称",
						dataIndex: "btnName",
					},{
						title: "规则编码",
						dataIndex: "orgName",
					},{
						title: "规则条件",
						dataIndex: "orgName1",
					})
				}
				this.columns.unshift({
					title: "#",
					align: "center",
					width: 55,
					langCode: "serialNo",
					scopedSlots: {
						customRender: "renderSerial",
					}
				})
	      this.current = current;
				this.getPageSet();
	    },
			cancel(){
				this.$emit("cancel")
			},
			handleAdd(){
				this.$refs.authMaintainForm.form.resetFields();
				this.$refs.authMaintainForm.title = "新增";
				this.authMaintainFormVisible = true;
			},
			authMaintainFormOk(){
				const form = this.$refs.authMaintainForm.form
				form.validateFields((errors, values) => {
					if(!errors){
						let url = "";
						if(values.uuid){
							url = "/system/sysMenuButton/update";
						}else{
							url = "/system/sysMenuButton/save";
						}
						values.menuUuid = this.menuUuid;
						this.$post(url, values).then(res => {
							if(res.statusCode === 200){
								this.authMaintainFormVisible = false;
								this.getPageSet();
								this.$message.success(res.message, 1.5)
							}else{
								this.$message.warning(res.message, 1.5)
							}
						})
					}
				})
			},
			authMaintainFormCancel(){
				this.authMaintainFormVisible = false;
			},
			handleEdit(record){
				this.authMaintainFormModel = record;
				this.$refs.authMaintainForm.title = "编辑";
				this.authMaintainFormVisible = true;
			},
			handleSub(record){
				const that = this;
				that.$confirm({
					title: that.$ct("tips","提示"),
					content: that.$ct("deleteConfirmationPrompt","确定删除该数据吗？删除之后不可恢复！"),
					okText: that.$ct("confirm","确定"),
					cancelText: that.$ct("cancel","取消"),
					closable: true,
					icon: () => that.$createElement('a-icon', {
						props: {
							key: 'warning',
							type: 'exclamation-circle',
							twoToneColor: '#faad14'
						}
					}),
					onOk() {
					 that.$post("/system/sysMenuButton/deleteBatch", {uuid: record.uuid}).then(res => {
						if(res.statusCode === 200){
							that.getPageSet();
							that.$message.success(res.message, 1.5)
						}else{
							that.$message.error(res.message, 1.5)
						}
					 })
					},
					onCancel() {}
				})
			},
			search(){
				this.getPageSet();
			},
			reset(){
				this.queryParam = {};
				this.getPageSet();
			}
	  }
	};
</script>

<style lang="less" scoped>
	/deep/.ant-steps-item-process .ant-steps-item-icon{
		background: none !important;
	}
	/deep/.ant-table-tbody>tr>td, /deep/.ant-table-thead>tr>th{
		padding: 6px !important;
	}
	/deep/.ant-table-pagination > li{
		min-width: 24px;
		height: 24px;
		line-height: 24px;
	}
	/deep/.ant-pagination-options{
		.ant-select-selection{
			height: 24px;
		}
		.ant-select-selection__rendered{
			line-height: 24px;
		}
	}
	
</style>